@extends('layouts.default')
@section('title', '用户列表')

@section('content')
  <script type="text/html" id="usersOper">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    @can('edit-users')
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    @endcan
    @can('destroy-users')
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    @endcan
  </script>


  <div class="layui-col-md-offset2 layui-col-md8" style="margin-top: 50px;">
    <div class="layui-card">
      <div class="layui-card-header">
        <h4>用户列表</h4>
      </div>
      <div class="layui-card-body">
        @include('shared._errors')
        <table class="layui-hide" id="users-table" lay-filter="users-table"></table>
      </div>
    </div>
  </div>
@endsection

@section('js')
<script>
  layui.use(['table', 'layer'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    table.render({
      elem: '#users-table'
      ,url:'{{ route('users.data') }}'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
      ,page: true //开启分页
      ,cols: [[
        {field:'id', title: 'ID', sort: true}
        ,{field:'name', title: '姓名'}
        ,{field:'email', title: '邮箱'}
        ,{field:'created_at', title: '注册时间', sort: true},
        ,{fixed: 'right', width:150, align:'center', title: '操作', toolbar: '#usersOper'} //这里的toolbar值是模板元素的选择器
      ]]
    });

    //监听工具条
    table.on('tool(users-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'detail'){ //查看
        var url = "{{ url('/users')}}/" + data.id;
        window.location.href = url;
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
          layer.close(index);
          var load = layer.load();
          //向服务端发送删除指令
          $.post("{{ route('users.destroy') }}", {
            _method: 'delete',
            ids: [data.id]
            }, function (res) {
              layer.close(load);
              if (res.code == 0) {
                  layer.msg(res.msg, {icon: 1}, function () {
                      obj.del();
                  })
              } else {
                  layer.msg(res.msg, {icon: 2})
              }
          });
        });
      } else if(layEvent === 'edit'){ //编辑
        //do something

        //同步更新缓存对应的值
        obj.update({
          username: '123'
          ,title: 'xxx'
        });
      } else if(layEvent === 'LAYTABLE_TIPS'){
        layer.alert('Hi，头部工具栏扩展的右侧图标。');
      }
    });


  });
</script>
@endsection
